<template>
  <!-- 个人中心 -->
  <el-card>
    <!-- 标题 -->
    <template #header>
      <h3 class="fs20">管理员信息</h3>
    </template>

    <!-- 列表 -->
    <ul class="fs18">
      <li>
        <span>管理员ID：</span>
        <p>{{ personalData.id }}</p>
      </li>
      <li>
        <span>账号：</span>
        <p>{{ personalData.account }}</p>
      </li>
      <li>
        <span>用户组：</span>
        <p>{{ personalData.userGroup }}</p>
      </li>
      <li>
        <span>创建时间：</span>
        <p>{{ personalData.ctime }}</p>
      </li>
    </ul>

    <!-- 头像 -->
    <div class="flex aic">
      <span class="fs18">管理员头像：</span>

      <!-- 上传头像功能实现：
      1. 把头像上传到服务器，服务器返回头像地址
      2. 把头像地址上传到数据库 -->

      <!-- 上传头像
      action="服务器接口地址"：上传文件的请求地址
      :on-success="handleAvatarSuccess"：上传成功的回调函数 -->
      <!-- 注意：上传文件的接口一般不用k:v的形式传参，所以不走我们封装好的axios，而使用element定义好的action属性发请求 -->
      <!-- 语法：action="服务器接口地址" -->

      <!-- 请求参数说明：
      file：二进制数据流，binary -->
      <el-upload
        class="avatar-uploader"
        action="http://127.0.0.1:5000/users/avatar_upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <el-button type="primary" @click="uploadAva()">上传头像</el-button>
    </div>
  </el-card>
</template>

<script>
import local from '@/utils/localStorage.js' // 本地存储
import { editAva } from '@/api/users.js' // 请求：修改用户头像

export default {
  data() {
    return {
      personalData: {}, // 个人中心数据
      imageUrl: '',
      imgUrl: '' // 服务器返回的头像地址
    }
  },

  created() {
    /* 取出存储在本地的个人中心的数据 */
    this.personalData = local.get('personalData')
  },

  methods: {
    /* 上传头像请求成功的回调函数 */
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)

      /* 响应参数说明：
      code：状态码，0代表成功，1代表失败，5001参数错误
      msg：提示信息
      imgUrl：上传图片名 如: xxx.jpg */

      // 1. 判断状态码code，执行不同功能
      if (res.code === 0) {
        // 2. 上传成功：定义数据保存服务器返回的头像地址
        this.imgUrl = res.imgUrl
      } else {
        // 3. 上传失败：提示失败信息
        this.$message.error({
          message: res.msg,
          center: true
        })
      }
    },

    /* 头像文件格式限制 */
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    /* 修改用户头像 */
    async uploadAva() {
      /* 请求参数说明：
      imgUrl：头像文件名，String */

      /* 响应参数说明：
      code：状态码，0代表成功，1代表失败，5001参数错误
      msg：提示信息 */

      // 1. 发起修改用户头像请求
      const { code, msg } = await editAva({
        imgUrl: this.imgUrl
      })

      // 2. 判断状态码code，执行不同功能
      if (code === 0) {
        // 3. 修改用户头像成功：提示成功信息
        this.$message.success({
          message: msg,
          center: true
        })

        // 4. 刷新页面
        setTimeout(() => {
          location.reload()
        }, 1000)
      } else {
        // 5. 修改用户头像失败：提示失败信息
        this.$message.error({
          message: msg,
          center: true
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
ul {
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 20px;

  li {
    padding: 20px 0;
    border-bottom: 1px solid #eff1f7;
    display: flex;
  }
}

span {
  width: 180px;
}

/* less的穿刺写法/deep/ */
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}

.avatar {
  width: 128px;
  height: 128px;
  display: block;
}

.el-button {
  margin-left: 25px;
  margin-top: 86px;
}
</style>
